<template>
  <div class="editPass">
    <div class="commons_top">
      <span @click="$router.go(-1)" class="back">取消</span>
      <span class="commons_title">修改密码</span>
    </div>
    <div class="editPass_main">
      <el-form ref="editPassForm" :model="editPassForm" :rules="rules" label-position="left">
        <div class="pass_list">
          <el-form-item label="旧密码" prop="oldPassword" label-width="80px">
            <el-input show-password v-model="editPassForm.oldPassword" autocomplete="off" placeholder="请输入旧密码"></el-input>
          </el-form-item>
        </div>
        <div class="pass_list">
          <el-form-item label="新密码" prop="newPassword1" label-width="80px">
            <el-input show-password v-model="editPassForm.newPassword1" autocomplete="off" placeholder="建议使用至少两种字符组合"></el-input>
          </el-form-item>
        </div>
        <div class="pass_list">
          <el-form-item label="确认密码" prop="newPassword2" label-width="80px">
            <el-input show-password v-model="editPassForm.newPassword2" autocomplete="off" placeholder="请再次输入新密码"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="pass_submit" @click="submitForm('editPassForm')">提交</div>
  </div>
</template>

<script>
import '@static/css/common.css'
import { Toast } from 'mint-ui';
import { countChangePassAPI } from '@/api/person'
import md5 from "js-md5";

export default {
  data() {
    var oldPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入旧密码'));
      } else {
        // if (this.editPassForm.oldPassword !== '') {
        // }
        callback();
      }
    };
    var newPassword1 = (rule, value, callback) => {
      let regs = /^[0-9a-zA-Z\W_]+$/;
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        if (this.editPassForm.newPassword1 == this.editPassForm.oldPassword) {
          callback(new Error('新密码不能与旧密码重复'));
        }else if(value.length<6 || value.length>20) {
          callback(new Error('长度必须在6-20个字符之间!'));
        } else if(!regs.test(value)) {
          callback(new Error('请输入数字、字母、符号的密码'));
        } else {
          callback()
        }
      }
    };
    var newPassword2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'));
      } else {
        if (this.editPassForm.newPassword2 !== this.editPassForm.newPassword1) {
          callback(new Error('新密码输入不一致'));
        } else {
          callback()
        }
      }
    };
    return {
      editPassForm: {
        oldPassword: '',
        newPassword1: '',
        newPassword2: ''
      },
      rules: {
        oldPassword: [
          {validator: oldPassword, trigger: 'change'}
        ],
        newPassword1: [
          {validator: newPassword1, trigger: 'change'}
        ],
        newPassword2: [
          {validator: newPassword2, trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {//修改密码
      this.$refs[formName].validate((valid) => {
        if(valid) {
          let data = {
            oldPassword: md5(this.editPassForm.oldPassword).toUpperCase(),
            newPassword1: md5(this.editPassForm.newPassword1).toUpperCase(),
            newPassword2: md5(this.editPassForm.newPassword2).toUpperCase()
          }
          countChangePassAPI(data).then(res => {//提交修改数据
            let code = res.data.code;
            if (code > 0) {
              Toast(res.data.msg)
            } else if (code < 0) {
              Toast(`修改失败`)
            } else {
              Toast("修改成功请重新登录")
              localStorage.clear();
              setTimeout(() => {
                this.navigationFuc('sign')
              }, 2000)
            }
          });
          return false;
        } else {
          return false;
        }
      });
    },
  },
}
</script>

<style>
  .editPass {
    width: 100%;
    height: 100vh;
    background: #F8F8F8;
  }
  .editPass .commons_top {
    background: #FFFFFF;
  }
  .editPass .back {
    color: #666666;
    font-size: 13px;
    padding-left: 0.1rem;
  }
  .pass_list {
    height: 1.08rem;
    line-height: 1.08rem;
    padding: 0 0.3rem;
    box-sizing: border-box;
    border-bottom: 0.02rem solid #E3E3E3;
  }
  .editPass_main .el-form-item {
    height: 100%;
    line-height: 1.08rem;
    padding-top: 0.2rem;
    margin-bottom: 0 !important;
  }
  .editPass_main .el-form-item__label {
    font-size: 15px;
    color: #333333;
  }
  .editPass_main .el-input__inner {
    background: transparent;
    border: none;
  }
  .editPass_main .el-form-item__error {
    top: 120%;
    left: 12px;
  }
  .pass_submit {
    position: fixed;
    left: 0.75rem;
    bottom: 0.4rem;
    width: 6rem;
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    background: linear-gradient(78deg, #FE8666, #FB584E);
    border-radius: 0.4rem;
    color: #FFFFFF;
    font-size: 15px;
  }
</style>